<template>
<header class="header">
    <div class="logo">
        <img :src="logoImgSrc" alt="logo" class="logo-img">
        <h3 class="logo-title" title="后台管理系统">后台管理系统</h3>
    </div>
    <div class="nav-top"></div>
    <div class="user-info">
        <img :src="logoImgSrc" alt="user-img" class="user-img">
        <h4 class="username">username</h4>
        <a class="logout" @click="handleLogout">logout</a>
    </div>
</header>
</template>

<script>
import { Local } from "../../common"
import { logout } from "../../config/data"
import { TOKEN } from "../../config/localConstant"

export default {
    name: "headerTop",
    data() {
        return {
            logoImgSrc: "",
        }
    },
    created() {
        this.logoImgSrc = require("../../assets/logo.png")
    },
    methods: {
        async handleLogout() {
            let result = await logout()
            Local.removeAll()
            this.$router.push("/login").catch(err => err)
        }
    },
}
</script>

<style scoped>
.header {
    position: relative;
    height: 50px;
    line-height: 50px;
    background-color: #363636;
    /* background-color: #e2e2e2; */
    /* padding: 0 12px; */
}
.logo,
.user-info {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 6px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}
.logo {
    left: 0;
}
.user-info {
    right: 24px;
}
.logo .logo-img,
.logo .logo-title,
.user-info .user-img,
.user-info .username,
.user-info .logout {
    padding: 0 6px;
    color: #f8f8f8;
}
.logo .logo-img,
.user-info .user-img {
    height: 42px;
}
.logo .logo-title {
    font-size: 18px;
}
.user-info .logout {
    color: #a72727;
    font-weight: 600;
}
</style>
